<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>个人疫情</title>
    <link rel="stylesheet" href="css/bootstrap.css" />
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-3.4.0.min.js"></script>
    <link type="text/css" rel="stylesheet" href=" css/personal.css">
</head>
<body style="background-color: #D4E5F0">
<a name="tou"></a>
    <div class="head">
        <div class="head_title">
            <div class="title"><b>天津疫情数据</b></div>
            <button class="button">疫情首页</button>
        </div>
    </div>
    <div class="body">
        <div class="daohangtiao">
            <div class="guonei"><a href="#tou"><b>疫情信息</b></a></div>
            <div class="xinwen"><a href="#bobao"><b>实时播报</b></a></div>
        </div>
        <script type="text/javascript">
            // 获取导航栏到屏幕顶部的距离
            var oTop = $(".daohangtiao").offset().top;
            //获取导航栏的高度，此高度用于保证内容的平滑过渡
            var martop = $('.daohangtiao').outerHeight();

            var sTop = 0;
            // 监听页面的滚动
            $(window).scroll(function () {
                // 获取页面向上滚动的距离
                sTop = $(this).scrollTop();
                // 当导航栏到达屏幕顶端
                if (sTop >= oTop) {
                    // 修改导航栏position属性，使之固定在屏幕顶端
                    $(".daohangtiao").css({ "position": "fixed", "top": "0", "left":"0","z-index":"100"});
                    // 修改内容的margin-top值，保证平滑过渡
                } else {
                    // 当导航栏脱离屏幕顶端时，回复原来的属性
                    $(".daohangtiao").css({ "position": "static" });
                }
            });
        </script>
        <div class="content"><b>天津</b></div>
        <div class="neirong">
            <div id="diyihang">
                <div class="xianyouquezhen">
                    <div class="xianyouquezhen1">现有确诊</div>
                    <div class="xianyouquezhen2"style="color: #ff6a57;" id="xianyouquezhen"></div>
                    <script type="text/javascript">
                        User={}
                        $.ajax({
                            contentType:"application/json;charset=utf-8",
                            type:"put",
                            url:"http://localhost:8080/table/getUser",
                            data: JSON.stringify(User),
                            dataType:"json",
                            success:function(res) {
                                console.log(res);
                                res = JSON.stringify(res);
                                var a=res.slice(11,-3);
                                document.getElementById("xianyouquezhen").innerText=a;

                            }
                        })

                    </script>
                </div>
                <div class="wuzhengzhuang">
                    <div class="xianyouquezhen1">新增无症状</div>
                    <div class="xianyouquezhen2"style="color: #e86d48;" id="xinzengwuzhengzhuang"></div>
                    <script type="text/javascript">
                        User={}
                        $.ajax({
                            contentType:"application/json;charset=utf-8",
                            type:"put",
                            url:"http://localhost:8080/table/getWuzhengzhuang",
                            data: JSON.stringify(User),
                            dataType:"json",
                            success:function(res) {
                                console.log(res);
                                res = JSON.stringify(res);
                                var a=res.slice(11,-3);
                                document.getElementById("xinzengwuzhengzhuang").innerText=a;
                            }
                        })

                    </script>
                </div>
                <div class="xianyouyisi">
                    <div class="xianyouquezhen1">现有疑似</div>
                    <div class="xianyouquezhen2"style="color: #ec9217;" id="xinzengbentu"></div>
                    <script type="text/javascript">
                        User={}
                        $.ajax({
                            contentType:"application/json;charset=utf-8",
                            type:"put",
                            url:"http://localhost:8080/table/getXianyouyisi",
                            data: JSON.stringify(User),
                            dataType:"json",
                            success:function(res) {
                                console.log(res);
                                res = JSON.stringify(res);
                                var a=res.slice(11,-3);
                                document.getElementById("xinzengbentu").innerText=a;
                            }
                        })

                    </script>
                </div>
                <div class="xianyouzhongzheng">
                    <div class="xianyouquezhen1">现有重症</div>
                    <div class="xianyouquezhen2"style="color: #545499;" id="xinzengsiwang"></div>
                    <script type="text/javascript">
                        User={}
                        $.ajax({
                            contentType:"application/json;charset=utf-8",
                            type:"put",
                            url:"http://localhost:8080/table/getXianyouzhongzheng",
                            data: JSON.stringify(User),
                            dataType:"json",
                            success:function(res) {
                                console.log(res);
                                res = JSON.stringify(res);
                                var a=res.slice(11,-3);
                                document.getElementById("xinzengsiwang").innerText=a;
                            }
                        })

                    </script>
                </div>
            </div>
            <a name="bobao">
                <div class="dierhang">
                    <div class="xianyouquezhen">
                        <div class="xianyouquezhen1">累计确诊</div>
                        <div class="xianyouquezhen2"style="color: #e83132;" id="leijiquezhen"></div>
                        <script type="text/javascript">
                            User={}
                            $.ajax({
                                contentType:"application/json;charset=utf-8",
                                type:"put",
                                url:"http://localhost:8080/table/getLeijiquezhen",
                                data: JSON.stringify(User),
                                dataType:"json",
                                success:function(res) {
                                    console.log(res);
                                    res = JSON.stringify(res);
                                    var a=res.slice(11,-3);
                                    document.getElementById("leijiquezhen").innerText=a;
                                }
                            })

                        </script>
                    </div>
                    <div class="wuzhengzhuang">
                        <div class="xianyouquezhen1">境外输入</div>
                        <div class="xianyouquezhen2"style="color: #476da0;" id="xinzengjingwai"></div>
                        <script type="text/javascript">
                            User={}
                            $.ajax({
                                contentType:"application/json;charset=utf-8",
                                type:"put",
                                url:"http://localhost:8080/table/getJingwaishuru",
                                data: JSON.stringify(User),
                                dataType:"json",
                                success:function(res) {
                                    console.log(res);
                                    res = JSON.stringify(res);
                                    var a=res.slice(11,-3);
                                    document.getElementById("xinzengjingwai").innerText=a;
                                }
                            })

                        </script>
                    </div>
                    <div class="xianyouyisi">
                        <div class="xianyouquezhen1">累计治愈</div>
                        <div class="xianyouquezhen2"style="color: #10aeb5;" id="leijizhiyu"></div>
                        <script type="text/javascript">
                            User={}
                            $.ajax({
                                contentType:"application/json;charset=utf-8",
                                type:"put",
                                url:"http://localhost:8080/table/getLeijizhiyu",
                                data: JSON.stringify(User),
                                dataType:"json",
                                success:function(res) {
                                    console.log(res);
                                    res = JSON.stringify(res);
                                    var a=res.slice(11,-3);
                                    document.getElementById("leijizhiyu").innerText=a;
                                }
                            })

                        </script>
                    </div>
                    <div class="xianyouzhongzheng">
                        <div class="xianyouquezhen1">累计死亡</div>
                        <div class="xianyouquezhen2"style="color: #4d5054;" id="leijisiwang"></div>
                        <script type="text/javascript">
                            User={}
                            $.ajax({
                                contentType:"application/json;charset=utf-8",
                                type:"put",
                                url:"http://localhost:8080/table/getLeijisiwang",
                                data: JSON.stringify(User),
                                dataType:"json",
                                success:function(res) {
                                    console.log(res);
                                    res = JSON.stringify(res);
                                    var a=res.slice(11,-3);
                                    document.getElementById("leijisiwang").innerText=a;
                                }
                            })

                        </script>
                    </div>
                </div>
            </a>
        </div>

        <div class="bendibobao">
            <div class="content"><b>本地播报</b></div>
            <div class="bobao">
                <div class="bobao_box">
                    <span class="circle"></span>
                    <div class="bobao_content">本地播报</div>
                </div>
                <div class="bobao_box">
                    <span class="circle"></span>
                    <div class="bobao_content">本地播报</div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div style="height: 19.2px;text-align: center;color: #F0F8FF;font-size: smaller;">上百度APP搜索 新型冠状病毒肺炎</div>
        <div style="height: 16px;text-align: center;color: #F0F8FF;margin-top: 3px;font-size: smaller;">了解最新进展及权威预防知识</div>
    </div>
    <div>
        　　<a id="GoTop" href="#tou">
        <div style="position: absolute;top: 1.3rem;left: 3.5625rem;font-weight: 700;font-size: .9375rem;line-height: 100%;">
            回到顶部
        </div>
            </a>
    </div>
</body>
</html>